<template>
  <page-container>
    <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="{ menuSpan: 8 }"
      @on-search="handleSearch">
      <template v-slot:newBtn>
        <el-button
          type="primary"
          @click="handelAddForm()"
          >新增软件包</el-button
        >
      </template>
    </search-form>

    <avue-table
      :dataList="dataList"
      :loading="loading"
      :page="page"
      :tableColumns="tableColumns"
      :tableOptions="{ menuWidth: 80 }"
      @onPageChange="onPageChange">
      <template v-slot:menu="{ row }">
        <el-button
          type="danger"
          icon="el-icon-delete"
          @click="delRow(row)"
          circle></el-button>
      </template>
      <!-- <template
        slot="channelHeader"
        slot-scope="{ row }">
        <el-tooltip
          class="tooltip"
          effect="dark"
          content="Top Left 提示文字"
          placement="top-start">
          <el-button class="e_button">渠道</el-button>
        </el-tooltip>
      </template> -->
    </avue-table>
  </page-container>
</template>

<script>
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { queryApkList, addApkPkg, delApkForm } from '@/api/userManage'
import { searchColumns, tableColumns, addDialogForm } from './config/table-config'

export default {
  mixins: [tableMixins],
  data() {
    return {
      searchForm: {},
      importForm: {
        film_apk: [],
      },
    }
  },
  computed: {
    ...mapGetters(['commonData', 'countryList', 'channelList']),
    userList() {
      return this.commonData?.userList ?? []
    },
    addDialogForm,
    searchColumns,
    tableColumns,
  },
  methods: {
    fetchMethod: queryApkList,
    // 删除封装
    async delRow(rowKey) {
      this.$confirm(this.$t('tables.deleteTips'), this.$t('tables.tips'), {
        confirmButtonText: this.$t('buttons.confirm'),
        cancelButtonText: this.$t('buttons.cancel'),
        type: 'warning',
      })
        .then(async () => {
          const parms = {
            id: rowKey?.id,
            channel: rowKey?.channel,
          }
          const resData = await delApkForm(parms)
          if (resData.code === 0) {
            this.$message.success(this.$t('tables.successfullyDeleted'))
            this.getList()
          }
        })
        .catch(() => {})
    },
    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      return searchParams
    },
    handelAddForm() {
      const parm = this.importForm
      this.$dialogForm.show({
        width: '50%',
        title: '新增软件包',
        data: parm,
        option: {
          span: 24,
          labelWidth: 130,
          column: this.addDialogForm,
        },
        callback: async ({ data, close }) => {
          const parms = {
            ...data,
            url: data?.film_apk[0].url,
            filename: data?.film_apk[0].name,
            size: data?.film_apk[0].size,
          }
          delete parms?.film_apk
          const resData = await addApkPkg(parms)
          if (resData.code === 0) {
            this.$message.success('新增成功')
          }
          this.getList()
          close()
        },
      })
    },
  },
  mounted() {
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped>
.e_button {
  border: none;
  background: #f8f8f8;
  color: #000 !important;
  font-weight: bold !important;
}
</style>
